<template>
	<view class="content">
		<view class="bbbb">
			<view class="fang" hover-class="xie" :style="{width:fangWidth,height:fangWidth}" style="background-color: #754624;"
			 @tap="jump(0)">
				<text style="color: #FFFFFF;font-size: 14rpx;">基础</text>
			</view>
			<view class="fang" hover-class="xie" :style="{width:fangWidth,height:fangWidth}" style="background-color: #986532;"
			 @tap="jump(1)">
				<text style="color: #FFFFFF;font-size: 14rpx;">组件</text>
			</view>
			<view class="fang" hover-class="xie" :style="{width:fangWidth,height:fangWidth}" style="background-color: #754289;"
			 @tap="jump(2)">
				<text style="color: #FFFFFF;font-size: 14rpx;">动画</text>
			</view>
			<view class="fang" hover-class="xie" :style="{width:fangWidth,height:fangWidth}" style="background-color: #111478;"
			 @tap="jump(3)">
				<text style="color: #FFFFFF;font-size: 14rpx;">练习</text>
			</view>
		</view>
	</view>
</template>

<script>
	const {
		windowWidth,
		windowHeight
	} = uni.getSystemInfoSync();
	export default {
		data() {
			return {
				fangWidth: '100px',
			}
		},
		created() {

		},
		onPullDownRefresh() {
			setTimeout()
			uni.stopPullDownRefresh();
		},
		onLoad() {
			if (windowHeight < windowWidth) {
				this.fangWidth = (windowWidth - 100) / 5 + 'px';
			} else {
				this.fangWidth = (windowWidth - 100) / 2 + 'px';
			}

		},
		methods: {
			jump(index) {
				var url = '';
				if (index == 1) {
					url = '';
				} else if (index == 2) {
					url = '/pages/main/one';
				} else if (index == 3) {
					url = '';
				} else {
					url = '/pages/main/unis';
				}
				uni.navigateTo({
					url: url,
					animationType:'slide-in-top',
					animationDuration:300
				})
			}
		}
	}
</script>

<style>
	.bbbb {
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		justify-content: space-around;
		flex-direction: row;
		width: 100%;
		height: 100vh;
		align-items: center;
	}

	.fang {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin: 10px;
		opacity:0.7;
		transition-duration: 0.3s;
		transform: rotate(0deg) scale(1);
		-webkit-transform: rotate(0deg) scale(1);
	}

	.xie {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin: 10px;
		opacity:0.9;
		transition-duration: 0.3s;
		transform: rotate(370deg) scale(1.1);
		-webkit-transform: rotate(370deg) scale(1.1);
	}

	.fang:hover {
		transform: rotate(370deg) scale(1.1);
		transition-duration: 0.3s;
		-webkit-transform: rotate(370deg) scale(1.1);
	}
</style>
